<template>
  <div class="news">
    <!-- <div class="kong"></div> -->
    <!-- 轮播图 -->
    <el-carousel  class="lunbotu" arrow="never">
        <el-carousel-item v-for="(item,index) in forData" :key="index">
            <img :src="item.url" alt="">
        </el-carousel-item>
    </el-carousel>
    <!-- 定位栏 -->
    <div class="contentHeaderCon">
        <h1 class="conHeaderTitle1">{{companyText1}}</h1>
        <h1 class="conHeaderTitle2">{{companyText2}}</h1>
    </div>
    <!-- 新闻列表头部 -->
    <div class="news_title_container">
      <div class="news_title clearFix">
        <p class="news_text">资讯动态</p>
        <ul class="news_tabbar">
          <li
            class="news_tab_item"
            :class="{ active: activeTab === index }"
            @click="switchTab(index,item.category_id)"
            v-for="(item, index) in rightTabbar"
            :key="index">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 新闻列表 -->
    <div class="news_list_container">
      <div class="news_list clearFix">
        <div class="news_item" v-for="(item, index) in newsList" :key="index" @click="toNewsDetail(item)">
          <div class="news_item_imgBox">
            <img :src="item.cover" alt="" class="news_item_img" />
          </div>
          <div class="news_item_text">
            <p class="news_item_title one_ellipsis">
              {{item.title}}
            </p>
            <p class="news_item_desc">
              {{item.subtitle}}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="6"
      :pager-count="11"
      background
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {ConsultingData,ConsultingDataClassify,getWebsiteOtherTuData} from '@/api/getData'
import Banner from "@/components/Banner";
export default {
  components: {
    Banner,
  },
  data() {
    return {
      activeTab: 0,
      currentPage: 1,
      total: 1,
      // rightTabbar: ["全部", "行业动态", "技术分享", "公司动态"],
      rightTabbar: [
        {id:1,name:'全部'},
        {id:1,name:'行业动态'},
        {id:1,name:'技术分享'},
        {id:1,name:'公司动态'},
      ],
      newsList:[
        {img:require('@/assets/images/news.png'),title:' 因联科技携手贵州移动助力凉都六盘手拉手的撒谎啥都我阿善动isID后IQ是',desc:'近日，由因联科技打造的“5G智慧马拉松”小程序，全面上线！'},
        {img:require('@/assets/images/news.png'),title:' 因联科技携手贵州移动助力凉都六盘手拉手的撒谎啥都我阿善动isID后IQ是',desc:'近日，由因联科技打造的“5G智慧马拉松”小程序，全面上线！'},
        {img:require('@/assets/images/news.png'),title:' 因联科技携手贵州移动助力凉都六盘手拉手的撒谎啥都我阿善动isID后IQ是',desc:'近日，由因联科技打造的“5G智慧马拉松”小程序，全面上线！'},
        {img:require('@/assets/images/news.png'),title:' 因联科技携手贵州移动助力凉都六盘手拉手的撒谎啥都我阿善动isID后IQ是',desc:'近日，由因联科技打造的“5G智慧马拉松”小程序，全面上线！'},
        {img:require('@/assets/images/news.png'),title:' 因联科技携手贵州移动助力凉都六盘手拉手的撒谎啥都我阿善动isID后IQ是',desc:'近日，由因联科技打造的“5G智慧马拉松”小程序，全面上线！'},
        {img:require('@/assets/images/news.png'),title:' 因联科技携手贵州移动助力凉都六盘手拉手的撒谎啥都我阿善动isID后IQ是',desc:'近日，由因联科技打造的“5G智慧马拉松”小程序，全面上线！'}
      ],
      forData:[],
      companyText1:'',
      companyText2:'',
      name:'',
    };
  },
  created(){
    this.getWebsiteOtherTuDataList()
    this.ConsultingDataClassifyList()
    this.switchTab(0,0)
  },
  methods: {
    // 获取官网banner图
    async getWebsiteOtherTuDataList(){
      try {
        const res = await getWebsiteOtherTuData({}).then(res=>{
            // console.log('官网数据',res);
            this.forData=res.data.bannerUrl
              this.companyText1=res.data.list[0].theme
            this.companyText2=res.data.list[0].subtitle
        })
      } catch (error) {}
    },
    // 点击分类查询详情
    async switchTab(index,id) {
      console.log(index,id);
      switch (id) {
        case 1:
          this.name='行业动态'
        break;
        case 2:
          this.name='技术分享'
        break;
        case 3:
          this.name='公司动态'
        break;
      }
      this.activeTab = index;
      try {
        const res = await ConsultingData({id:id,page:1,limit:15}).then(res=>{
          console.log(res);
          this.newsList=res.data.list
        })
      } catch (error) {}
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 咨询分类
    async ConsultingDataClassifyList(){
      try {
        const res = await ConsultingDataClassify({}).then(res=>{
          console.log('咨询分类',res);
          res.data.unshift({category_id: 0, name: "全部", creation_time: "2020-10-10 10:51:35", del: "0"})
          this.rightTabbar=res.data
          console.log(this.rightTabbar);
        })
      } catch (error) {}
    },
    // 点击咨询去往咨询详情
    toNewsDetail(item){
      console.log(item);
      let id=item.advisory_id
      switch (item.category_id) {
          case 1:
              this.name='行业动态'
          break;
          case 2:
              this.name='技术分享'
          break;
          case 3:
              this.name='公司动态'
          break;
      }
      let names=this.name
      this.$router.push({
          path:'/newsDetail',
          query:{
              id,names
          }
      });
      document.documentElement.scrollTop=0
    }
  },
};
</script>

<style scoped lang="scss">
.kong{
  height: 80px;
}
/* 定位内容 */
.contentHeaderCon{
  position: absolute;
  top: 15%;
  left: 10%;
  z-index: 100;
}
.conHeaderTitle1{
  font-size: 45px;
  color: #FFFFFF;
}
.conHeaderTitle2{
  font-size: 57px;
  color: #FFFFFF;
}
.news_title_container {
  width: 100%;
  min-width: 1450px;
  box-shadow: 0 5px 5px #eeeeee;
}
.news_title {
  height: 120px;
  width: 1450px;
  margin: 0 auto;
  .news_text {
    float: left;
    color: #004ea2;
    line-height: 120px;
    font-size: 22px;
  }
  .news_tabbar {
    float: right;
    box-sizing: border-box;
    height: 120px;
    .news_tab_item {
      font-size: 22px;
      height: 120px;
      line-height: 120px;
      box-sizing: border-box;
      float: left;
      margin-left: 20px;
      padding: 0 8px;
      cursor: pointer;
    }
    .news_tab_item:hover{
      border-bottom: 4px solid #004ea1;
    }
    .news_tab_item.active {
      border-bottom: 4px solid #004ea1;
    }
  }
}
.con6TopBox:hover .con6Img{
    transform: scale(1.2);
}
.con6TopBox:hover .con6TopBoxCon{
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
}
// 新闻列表
.news_item:hover .news_item_text{
  // box-shadow:#000 0 0 3px  ;
  background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
}
// .news_item:hover .news_item_imgBox::after{
//   content: '';
//   display: block;
//   width: 453px;
//   height: 304px;
//   background-color: rgba(0,0,0,.5);
//   position: absolute;
//   top: 0;
//   left: 0;
//   z-index: 999;
// }
.news_item:hover .news_item_img{
  transform: scale(1.2);
}
.news_list_container {
  width: 100%;
  min-width: 1450px;
  .news_list {
    width: 1450px;
    margin: 0 auto;
    padding-top: 36px;
    .news_item {
      width: 453px;
      float: left;
      margin-right: 45px;
      margin-bottom: 50px;
      .news_item_imgBox{
        width: 451px;
        height: 304px;
        overflow: hidden;
        position: relative;
        .news_item_img {
        width: 100%;
        height: 100%;
        margin-bottom: -3px;
        transition: all 1s;
      }
      }
    }
    .news_item:nth-child(3n) {
      margin-right: 0;
    }
    .news_item_text {
      height: 200px;
      box-sizing: border-box;
      border: 1px solid #eeeeee;
      padding: 26px 22px;
      .news_item_title {
        font-size: 24px;
        margin-bottom: 33px;
      }
      .news_item_desc {
        font-size: 18px;
        font-family: Source Han Sans CN;
        color: #414141;
        line-height: 31px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }
    }
  }
}

// 分页器
.pagination {
  text-align: center;
  width: 1450px;
  margin: 0 auto 60px;
}
</style>